<template>
  <div>
    <el-row class="mb20" :gutter="20">
      <el-col :span="12">
        <div>
          供应商名称：
          <span>{{ detailObj.supplierName }}</span>
          <el-tag
            style="margin-left: 20px"
            :color=" judgeColor(detailObj.entryState)"
          >{{ judgeState(detailObj.entryState) }}</el-tag>
          <el-tag v-if="detailObj.handleStateName" type="warning">{{ detailObj.handleStateName }}</el-tag>
        </div>
      </el-col>
      <el-col :span="12">
        <div>
          所属省份城市：
          <span>{{detailObj.supplierProvince}}{{ detailObj.supplierCity }}</span>
        </div>
      </el-col>
    </el-row>
    <el-row class="mb20" :gutter="20">
      <el-col :span="6">
        <div>
          供应商类型：
          <span>{{ judgeWord(this.typeData, detailObj.supplierType) }}</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          性质：
          <span>{{ judgeWord(natureData, detailObj.supplierNature) }}</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          企业规模：
          <span>{{ judgeWord(scaleData, detailObj.supplierScale) }}</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          所属行业：
          <span>{{ judgeWord(industryArr, detailObj.supplierIndustry) }}</span>
        </div>
      </el-col>
    </el-row>
    <el-row class="mb20" :gutter="20">
      <el-col :span="6">
        <div>
          创建人：
          <span>{{ detailObj.createUser }}</span>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          创建时间：
          <span>{{ detailObj.createTime ? formatTime(detailObj.createTime) : null }}</span>
        </div>
      </el-col>
    </el-row>
    <el-divider />
    <el-row class="tableExpandRow" :gutter="20">
      <el-col :span="18">
        <div class="mb10">
          统一社会信用代码：
          <span>{{ detailObj.uscc }}</span>
        </div>
        <div class="mb10">
          <span style="margin-right: 165px">
            法人代表：
            <span>{{ detailObj.legalRepresentative }}</span>
          </span>
          <span>
            营业期限：
            <span>{{ detailObj.businessBegin}}{{ detailObj.businessEnd ? `--${detailObj.businessEnd}` : null }}</span>
          </span>
        </div>
        <div class="mb10">
          地址：
          <span>{{ detailObj.businessAddress }}</span>
        </div>
        <div class="mb10">
          <span>经营范围：</span>
          <span>{{ detailObj.businessScope }}</span>
        </div>
        <div class="mb10">
          <span style="margin-right: 50px">
            联系人：
            <span>{{ detailObj.linkmanName }}{{ detailObj.linkmanTitle ? `(${detailObj.linkmanTitle})` : null}}</span>
          </span>
          <span>电话：</span>
          <span>{{ detailObj.linkmanTel }}</span>
        </div>
      </el-col>
      <el-col :span="6">
        <img v-viewer style="width:300px" :src="detailObj.savePath" alt="示例图片" />
      </el-col>
    </el-row>
    <el-divider />
    <!-- Todo 不良记录信息 -->
    <el-row :gutter="20"></el-row>
  </div>
</template>

<script>
import demoImg from '@/assets/license.jpeg'
import { supplierDetail } from '@/api/supplier'
import { setSession, getSession, removeSession, getDicData, formatTime, judgeState, judgeColor } from '@/utils/util'

export default {
  data() {
    return {
      demoImg,
      detailObj: {},
      typeData: [],
      scaleData: [],
      natureData: [],
      industryArr: []
    }
  },
  created() {
    this.typeData = getDicData('002', '002001')
    this.scaleData = getDicData('002', '002004')
    this.natureData = getDicData('002', '002002')
    this.industryArr = getDicData('002', '002003')
  },
  methods: {
    judgeState(num) {
      return judgeState(num)
    },
    judgeColor(num) {
      return judgeColor(num)
    },
    judgeWord(arr, key) {
      let str = ''
      arr.map(v => {
        if (v.key === key) {
          str = v.title
        }
      })
      return str
    }
  },
  mounted() {
    console.log('route', this.$route)

    let mdl = {}
    const obj = this.$route.params.obj

    if (obj) {
      setSession('record', obj)
      mdl = obj
    } else {
      mdl = getSession('record')
    }
    supplierDetail({ supplierCode: mdl.supplierCode, entryState: mdl.entryState }).then(res => {
      this.detailObj = res.data
    })
  },
  destroyed() {
    removeSession('record')
  }
}
</script>

<style scoped>
.tableExpandRow .ant-col-18 div {
  margin-bottom: 10px;
}
</style>
